// 基本设置
export const configSetting = (Shape) => {
	return {
		background: {
			color: '#fff',
		},
		// scroller: true,
		// grid: true, //网格，默认使用 10px 的网格，但不绘制网格背景
		pannable: {
			enabled: true,
			modifiers: ["alt", "ctrl", "meta"], //设置修饰键后需要点击鼠标并按下修饰键才能触发画布拖拽
			eventTypes: ['leftMouseDown']
		},
		autoResize: true,//是否监听容器大小改变，并自动更新画布大小。
		// translating: { restrict: true },//限制节点移动
		mousewheel: {//鼠标滚轮缩放
			enabled: false,//是否开启滚轮缩放交互
			zoomAtMousePosition: true,//是否将鼠标位置作为中心缩放
			modifiers: 'ctrl',//修饰键,设置修饰键后需要按下修饰键并滚动鼠标滚轮时才触发画布缩放
			minScale: 0.5,//最小的缩放级别
			maxScale: 2,//最大的缩放级别
		},
		connecting: {//连线选项
			router: {//路由
				//name: 'orth', orth 正交路由，由水平或垂直的正交线段组成。
				name: 'manhattan',//	智能正交路由，由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）。
				args: {//路由参数
					padding: 10,//设置锚点距离转角的最小距离
				},
			},
			connector: {//连接器
				name: 'normal',//圆角连接器时
				args: {//连接器参数
					radius: 10,//倒角半径
				},
			},
			highlight: true,
			anchor: 'center',//当连接到节点时，指定被连接的节点的锚点
			connectionPoint: 'anchor',//指定连接点
			allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
			allowBlank: false,//是否允许连接到画布空白位置的点
			snap: {//是否触发自动吸附,当 snap 设置为 true 时连线的过程中距离节点或者连接桩 50px 时会触发自动吸附
				radius: 20,//自定义触发吸附的距离
			},
			highlight: true,
			createEdge() {//连接的过程中创建新的边
				return new Shape.Edge({
					attrs: {//定制样式
						line: {//定义了 'line'选择器
							stroke: '#000',// 使用自定义边框色
							strokeWidth: 2, //边宽度
							targetMarker: {//终点箭头
								name: 'block',//箭头名:实心箭头
								width: 12,//箭头宽度
								height: 8//	箭头高度
							},
						},
					},
					zIndex: 0,//层级
				})
			},
			validateConnection({ targetMagnet }) {//在移动边的时候判断连接是否有效
				return !!targetMagnet
			},
		},
		onToolItemCreated({ tool }) {//当工具项渲染完成时触发的回调
			const handle = tool
			const options = handle.options
			if (options && options.index % 2 === 1) {
				tool.setAttrs({ fill: 'red' })
			}
		},
		highlighting: {//高亮选项,指定触发某种交互时的高亮样式
			// 当链接桩可以被链接时，在链接桩外围渲染一个 2px 宽的红色矩形框
			magnetAvailable: {
				name: 'stroke',
				args: {
					padding: 1,
					attrs: {
						'stroke-width': 1,
						fill: '#fff',//填充的颜色
						stroke: '#b1e1fa', //边的颜色
					}
				}
			},
			magnetAdsorbed: {//连线过程中，自动吸附到链接桩时被使用
				name: 'stroke',
				args: {//高亮样式
					attrs: {//定制样式
						padding: 4,
						'stroke-width': 4,
						fill: '#fff',//填充的颜色
						stroke: '#5F95FF', //边的颜色
					},
				},
			},
		},
		resizing: true,//缩放节点
		rotating: true,//旋转节点
		// selecting: {//点选/框选,开启后可以通过点击或者套索框选节点
		// 	enabled: true,//启用
		// 	rubberband: true,//是否启用框选
		// 	showNodeSelectionBox: true,//是否显示节点的选择框
		// },
		snapline: true,//对齐线
		keyboard: true,//键盘快捷键
		clipboard: true,//剪切板
		history: true,
	}
}

// 节点预设类型 （0椭圆形: defaultOval, 1方形: defaultSquare, 2圆角矩形: defaultYSquare, 3菱形: defaultRhombus, 4平行四边形: defaultRhomboid, 5圆形: defaultCircle, 6图片: otherImage)
export const configNodeShape = (type) => {
	const nodeShapeList = [{
		label: '椭圆形',
		/**
		 *  加入data里面的标识type是为了方便编辑的时候找到相对应的类型进行不同的编辑处理
		 *  另外获取初始对应的设置
		*/
		data: {
			type: 'defaultOval'
		},
		shape: 'rect',
		width: 100,
		height: 50,
		attrs: {
			// 指定 rect 元素的样式
			body: {
				rx: 20,// x 半径
				ry: 26,//y 半径
				fill: '#fff',// 填充颜色
				stroke: '#333'// 边框颜色
			},
			// 指定 text 元素的样式
			label: {
				text: '椭圆形', // 文本
				fontSize: 16,// 文字大小
				fill: '#333'//文字颜色
			},
		}
	},
	{
		label: '方形',
		data: {
			type: 'defaultSquare',
		},
		shape: 'rect',
		width: 100,
		height: 50,
		attrs: {
			label: {
				text: '方形',
				fontSize: 16,
				fill: '#333'
			},
			body: {
				fill: '#fff',
				stroke: '#333'
			}
		},
	},
	{
		label: '圆角矩形',
		data: {
			type: 'defaultYSquare'
		},
		shape: 'rect',
		width: 100,
		height: 50,
		attrs: {
			body: {
				rx: 6,
				ry: 6,
				fill: '#fff',
				stroke: '#333'
			},
			label: {
				text: '圆角矩形',
				fontSize: 16,
				fill: '#333'
			}
		},
	},
	{
		label: '菱形',
		data: {
			type: 'defaultRhombus'
		},
		shape: 'polygon',
		width: 120,
		height: 50,
		attrs: {
			body: {
				refPoints: '0,10 10,0 20,10 10,20',
				fill: '#fff',
				stroke: '#333'
			},
			label: {
				text: '菱形',
				fontSize: 16,
				fill: '#333'
			}
		},
	},
	{
		label: '平行四边形',
		data: {
			type: 'defaultRhomboid'
		},
		shape: 'polygon',
		width: 120,
		height: 50,
		attrs: {
			body: {
				refPoints: '10,0 40,0 30,20 0,20',
				fill: '#fff',
				stroke: '#333'
			},
			label: {
				text: '平行四边形',
				fontSize: 16,
				fill: '#333'
			}
		}
	},
	{
		label: '圆形',
		data: {
			type: 'defaultCircle'
		},
		shape: 'circle',
		width: 80,
		height: 80,
		attrs: {
			label: {
				text: '圆形',
				fontSize: 16,
				fill: '#333'
			},
			body: {
				fill: '#fff',
				stroke: '#333'
			}
		}
	},
	{
		label: "图片",
		data: {
			type: 'otherImage'
		},
		shape: 'rect',
		width: 80,
		height: 80,
		markup: [
			{
				tagName: 'rect',
				selector: 'body',
			},
			{
				tagName: 'image',
			},
			{
				tagName: 'text',
				selector: 'label',
			},
		],
		attrs: {
			body: {
				fill: '#fff',
				stroke: '#333'
			},
			image: {
				width: 80,
				height: 80,
				refX: 0,
				refY: 0,
				xlinkHref: 'https://pic4.zhimg.com/80/v2-369ccdc73ae7e715bd1e4093072d3e3b_720w.jpg',
			},
			label: {
				fontSize: 14,
				fill: '#333',
				text: '图片'
			},
		},
	}
	]
	if (type) {
		const obj = nodeShapeList.find(item => { return item.data.type === type })
		return obj || nodeShapeList
	}
	return nodeShapeList
}

// 节点连接装设置
export const configNodePorts = () => {
	return {
		groups: {//链接桩组定义
			top: {
				position: 'top',//链接桩位置
				attrs: {//属性和样式
					circle: {//圆形
						r: 4,//圆半径
						magnet: true,//使链接桩在连线交互时可以被连接上
						stroke: '#5F95FF',//自定义边框色
						strokeWidth: 1,//边宽度
						fill: '#fff',//填充的颜色
						style: {
							visibility: 'hidden',//是否可见
						},
					},
				},
			},
			right: {
				position: 'right',
				attrs: {
					circle: {
						r: 4,
						magnet: true,
						stroke: '#5F95FF',
						strokeWidth: 1,
						fill: '#fff',
						style: {
							visibility: 'hidden',
						},
					},
				},
			},
			bottom: {
				position: 'bottom',
				attrs: {
					circle: {
						r: 4,
						magnet: true,
						stroke: '#5F95FF',
						strokeWidth: 1,
						fill: '#fff',
						style: {
							visibility: 'hidden',
						},
					},
				},
			},
			left: {
				position: 'left',
				attrs: {
					circle: {
						r: 4,
						magnet: true,
						stroke: '#5F95FF',
						strokeWidth: 1,
						fill: '#fff',
						style: {
							visibility: 'hidden',
						},
					},
				},
			},
		},
		items: [
			{
				group: 'top',
			},
			{
				group: 'right',
			},
			{
				group: 'bottom',
			},
			{
				group: 'left',
			},
		]
	}
}

// 连线 label 设置
export const configEdgeLabel = (labelText, fontColor, fill, stroke) => {
	if (!labelText) return { attrs: { labelText: { text: '' }, labelBody: { fill: '', stroke: '' } } }
	return {
		markup: [//定制标签样式
			{
				tagName: 'rect',
				selector: 'labelBody',
			},
			{
				tagName: 'text',
				selector: 'labelText',
			},
		],
		attrs: {//标签样式
			labelText: {
				text: labelText || '',
				fill: fontColor || '#333',
				textAnchor: 'middle',
				textVerticalAnchor: 'middle',
			},
			labelBody: {
				ref: 'labelText',
				refX: -8,
				refY: -5,
				refWidth: '100%',
				refHeight: '100%',
				refWidth2: 16,
				refHeight2: 10,
				stroke: stroke || '#555',
				fill: fill || '#fff',
				strokeWidth: 2,
				rx: 5,
				ry: 5,
			},
		}
	}
}

// 键盘事件
export const graphBindKey = (graph) => {
	// bindKey - 绑定键盘快捷键
	// 复制
	graph.bindKey(['meta+c', 'ctrl+c'], () => {
		const cells = graph.getSelectedCells()//获取选中的节点/边
		if (cells.length) {
			graph.copy(cells)//复制节点/边
		}
		return false
	})
	// 剪切
	graph.bindKey(['meta+x', 'ctrl+x'], () => {
		const cells = graph.getSelectedCells()//获取选中的节点/边
		if (cells.length) {
			graph.cut(cells)//剪切节点/边
		}
		return false
	})
	// 粘贴
	graph.bindKey(['meta+v', 'ctrl+v'], () => {
		if (!graph.isClipboardEmpty()) {//返回剪切板是否为空
			const cells = graph.paste({ offset: 32 })//粘贴，返回粘贴到画布的节点/边。
			graph.cleanSelection()//清空选区。
			graph.select(cells)//选中指定的节点/边
		}
		return false
	})
	//撤销
	graph.bindKey(['meta+z', 'ctrl+z'], () => {
		console.log('graph.canUndo() :>> ', graph.canUndo());
		if (graph.canUndo()) {//是否可以撤销
			graph.undo()//撤销
		}
		return false
	})
	// 重做
	graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
		console.log('graph.canRedo() :>> ', graph.canRedo());
		if (graph.canRedo()) {//是否可以重做
			graph.redo()//重做
		}
		return false
	})
	// 全选
	// graph.bindKey(['meta+a', 'ctrl+a'], () => {
	// 	const nodes = graph.getNodes()//返回画布中所有节点
	// 	if (nodes) {
	// 		graph.select(nodes)//选中指定的节点/边
	// 	}
	// })
	//删除 - 后续组件单独特殊处理
	// graph.bindKey('backspace', () => {
	// 	const cells = graph.getSelectedCells()
	// 	if (cells.length) {
	// 		graph.removeCells(cells)
	// 	}
	// })
	// 缩放
	// graph.bindKey(['ctrl+1', 'meta+1'], () => {
	// 	const zoom = graph.zoom()//获取画布缩放比例
	// 	if (zoom < 1.5) {
	// 		graph.zoom(0.1)
	// 	}
	// })
	// graph.bindKey(['ctrl+2', 'meta+2'], () => {
	// 	const zoom = graph.zoom()//获取画布缩放比例
	// 	if (zoom > 0.5) {
	// 		graph.zoom(-0.1)
	// 	}
	// })
	return graph
}
